<template>
  <base-breadcrumb title="科技成果申报">
    <div class="about-master-container" v-loading="spinning">
      <a-card>
        <title-name title="基础信息" />
        <a-form-model>
          <a-row>
            <a-col span="16">
               <a-form-model-item label="所属单位">
                <BaseInput disabled v-model="form.viewName" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card v-if="plan">
        <title-name title="科技管理计划信息" />
        <a-form-model>
          <a-row>
            <a-col span="8">
              <a-form-model-item label="成果名称">
                <BaseInput disabled v-model="plan.planAchievementsName" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="成果分类">
                <BaseInput disabled v-model="plan.achievementsType" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="成果等级">
                <BaseInput disabled v-model="plan.planAchievementsLevel" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="计划完成人">
                <a-tag>{{ plan.planCompleteEmployee }}</a-tag>
                <!--                <BaseInput disabled v-model="plan.planCompleteEmployee" placeholder="请输入" />-->
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="8">
              <a-form-model-item label="计划完成时间">
                <BaseInput disabled v-model="plan.planCompleteDate" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col span="8">
              <a-form-model-item label="计划附件">
                <file-link :file-list="plan.fileArrays" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card v-if="queryParam" :loading="loading">
        <titleName title="科技成果申报信息" />
        <div class="descriptions">
          <a-form-model
            ref="form"
            :model="queryParam"
            :rules="rules"
          >
            <a-row>
              <a-col span="8">
                <a-form-model-item
                  label="成果名称"
                  prop="declareAchievementsName"
                >
                  <BaseInput
                    v-model="queryParam.declareAchievementsName"
                    placeholder="请输入申报成果名称"
                  />
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item
                  label="成果分类"
                  prop="declareAchievementsTypeId"
                >
                  <a-select
                    v-model="queryParam.declareAchievementsTypeId"
                    placeholder="请选择"
                    @change="getLevelList($event)"
                  >
                    <a-select-option
                      v-for="item in ClassifyList"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{
                        item.name
                      }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item
                  label="成果等级"
                  prop="declareAchievementsLevelId"
                >
                  <a-select
                    v-model="queryParam.declareAchievementsLevelId"
                    @change="completeAchievementsLevelIdChange($event)"
                    placeholder="请选择"
                  >
                    <a-select-option
                      v-for="(item, index) in LevelList"
                      :key="index"
                      :value="item.id"
                    >
                      {{
                        item.levelName
                      }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-form-model-item
                  label="申报人"
                  prop="joinEmployee"
                >
                  <a-tag
                    v-for="item in queryParam.joinEmployee"
                    :key="item.id"
                    closable
                    @close="queryParam.joinEmployee = queryParam.joinEmployee.filter((v) => v.id !== item.id)"
                  >
                    {{ item.name }}
                  </a-tag>
                  <a-button
                    v-if="queryParam.joinEmployee.length < canAddPeopleLength"
                    :disabled="!completeAchievementsLevelName1"
                    @click="visible = true"
                  >添加
                  </a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="8">
                <a-form-model-item
                  prop="declareDate"
                  label="申报日期"
                >
                  <a-date-picker
                    v-model="queryParam.declareDate"
                    type="date"
                    @change="getDeclareDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col span="16">
                <a-form-model-item
                  label="附件"
                  prop="fileArrays"
                  ref="fileArrays"
                  :auto-link="false"
                >
                  <upload-list
                    business-code="STM04"
                    :upload-arrys.sync="queryParam.fileArrays"
                    :is-limit="true"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </a-card>
      <div class="pull-right page-btn-right-top">
        <a-button
          style="margin: 0 10px"
          type="primary"
          @click="Submit"
        >
          提交
        </a-button>
        <a-button
          style="margin: 0 10px"
          type="primary"
          @click="$multiTab.close()"
        >
          取消
        </a-button>
      </div>
    </div>
    <SelectPerson
      :max-select-length="canAddPeopleLength"
      :visible.sync="visible"
      title="添加完成人"
      :list.sync="queryParam.joinEmployee"
    />
    <selectApprover :businessId="businessId"  :processConfig="setProcessConfig"></selectApprover> 
  </base-breadcrumb>
</template>

<script>
import { getClassifyList, getGradeList } from '@/api/achievementsType'
import { editDeclare, addDeclare, getDeclare } from '@/api/achievementsManage'
import Madel from '../plots/components/Madel'
import UploadList from '@/components/UploadList'
import deleteFun from './delete.js'
import Vue from 'vue'
import BaseEditPage from '@/views/baseEditPage'
import SelectPerson from '@/components/Select/SelectPerson'

let validator = (rule, value, callback) => {
  if (value && value.length > 0) {
    callback()
  } else {
    callback('请上传附件！')
  }
}
const rules = {
  declareAchievementsName: [{ required: true, message: '请输入申报成果名称', trigger: 'change' }],
  declareAchievementsTypeId: [{ required: true, message: '请选择申报分类', trigger: 'change' }],
  declareCompleteEmployee: [{ required: true, message: '请输入完成人', trigger: 'change' }],
  declareAchievementsLevelId: [{ required: true, message: '请选择申报成果等级', trigger: 'change' }],
  declareDate: [{ required: true, message: '请选择申报日期', trigger: 'change' }],
  fileArrays: [{ required: true, validator: validator, trigger: 'blur' }],
  joinEmployee: [{ type: 'array', required: true, message: '请选择申报人', trigger: 'blur' }]
}
export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  data() {
    return {
      queryParam: { joinEmployee: [], fileArrays: [] },
      plan: null,
      spinning: false,
      information: {},
      rules: rules,
      ClassifyList: [],
      LevelList: [],
      fileList: [],
      declareDate: undefined,
      loading: false,
      visible: false,
      planRange: true,
      init: false,
      title: undefined,
      achievementsTypeName: '',
      completeAchievementsLevelName1: '',
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null,
      form: {
        viewName: ""
      },
    }
  },
  computed: {
    canAddPeopleLength() {
      if (this.achievementsTypeName === '研发立项' || this.achievementsTypeName === '示范工程立项') {
        if (this.completeAchievementsLevelName1.includes('局') || this.completeAchievementsLevelName1.includes('省')) {
          return 15
        }
      }
      return 100
    }
  },
  watch: {
    'queryParam.joinEmployee'(newVal, oldVal) {
      if (this.init && newVal !== oldVal) {
        this.$refs.form.validateField('joinEmployee')
      }
    },
    'queryParam.fileArrays'(newVal, oldVal) {
      // console.log('fileArrays',newVal,oldVal)
      if (this.init) {
        this.$refs.form.validateField('fileArrays')
        // this.$refs.fileArrays.onFieldChange()
      }
    }
  },
  components: {
    SelectPerson,
    UploadList
  },
 async mounted() {
    this.getData()
   //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('achievements_declare')  
  },
  methods: {
    async getData() {
      this.spinning = true
      let res1 = await getClassifyList({ status: '1' })
      if (res1.code === this.SUCCESS_CODE) {
        this.ClassifyList = res1.data
      }
      let id = this.id
      let res = await getDeclare({ id })
      this.spinning = false
      if (res.code === this.SUCCESS_CODE) {
        this.information = res.data
        this.form.viewName = this.information.branchCompany + '/' + this.information.projectName
        this.queryParam = this.type === '申报' ? { joinEmployee: [], fileArrays: [] } : res.data.sciencesDeclare
        if (this.queryParam.joinEmployee) {
          this.queryParam.joinEmployee = this.queryParam.joinEmployee.map(v => {
            return { name: v.employeeName, id: v.employeeId }
          })
        }
        this.plan = res.data.sciencesPlan
        this.queryParam.declareAchievementsTypeId && await this.getLevelList(this.queryParam.declareAchievementsTypeId, true)
        this.queryParam.declareAchievementsLevelId && this.completeAchievementsLevelIdChange(this.queryParam.declareAchievementsLevelId, true)
        // res.data.sciencesDeclare.declareAchievementsTypeId && this.getLevelList()
      }
      setTimeout(() => {
        this.init = true
      }, 100)
    },
    async getLevelList(id, init = false) {
      if (!init) {
        this.$set(this.queryParam, 'declareAchievementsLevelId', undefined)
      }
      let temp = this.ClassifyList.find(v => v.id === id)
      if (temp) {
        this.achievementsTypeName = temp.name
      }
      let res = await getGradeList({ typeId: this.queryParam.declareAchievementsTypeId, status: 1 })
      if (res.code === this.SUCCESS_CODE) {
        this.LevelList = res.data.data
      }
    },
    completeAchievementsLevelIdChange(e, init = false) {
      let temp = this.LevelList.find(v => v.id === e)
      if (temp) {
        this.completeAchievementsLevelName1 = temp.levelName
        if (!init) {
          this.queryParam.joinEmployee = []
        }
      }
    },
    getDeclareDate(data, dateString) {
      this.queryParam.declareDate = dateString
    },
    handleChange(info) {
      if (info.file.status !== 'uploading' && info.file.status != 'error') {
        this.queryParam.declareAttach = info.fileList.filter((item) => item.status == 'done')
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 文件上传失败.`)
      }
    },
    deleteFile(i) {
      this.queryParam.declareAttach = deleteFun(this.queryParam.declareAttach, i)
    },
    Submit() {
      this.setProcessConfig = null;   
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          this.$message.warning('信息不完整')
          return false
        } else {
          this.submitApprovalConfirm(this.processConfig, async (flag) => {
            if(!flag) {
              return
            }
            let queryParam = this.$clone(this.queryParam)
            queryParam.id = this.information.id
            if (this.planRange) {
              queryParam.planOrNot = 1
            }
            queryParam.planId = this.information.planId
            queryParam.joinEmployee = this.queryParam.joinEmployee.map(v => {
              return { employeeName: v.name, employeeId: v.id }
            })
            queryParam.status = 1
            let res
            this.loading = true
            if (this.type === '申报') {
              res = await addDeclare(queryParam)
            } else if (this.type === '编辑' || this.type === '申报驳回') {
              res = await editDeclare(queryParam)
            }
            this.loading = false
            if (res.code === this.SUCCESS_CODE) {
              this.$message.success('提交申报成功')
               //提交时，返回id
               this.businessId = res.data.id;
               this.setProcessConfig = this.processConfig;
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 10px 10px 5px #ccc;
  box-sizing: border-box;

  .title {
    margin-bottom: 20px;

    .minusicon {
      display: inline-block;

      .icon {
        transform: rotate(90deg);
        font-size: 20px;
        color: #048fe0;
      }
    }

    span {
      display: inline-block;
      margin-top: 5px;
      font-size: 20px;
    }
  }

  .descriptions {
    padding: 20px;
    box-sizing: border-box;
  }
}

.box-title {
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/deep/ .ant-upload-list {
  display: none;
}
</style>
